<template>
  <div class="events-index">
    <section class="common-cards hot-activities">
      <div class="common-title clear">
        <span class="fl">热门活动</span>
        <span class="fr">
          <router-link to="/events/school">更多 ></router-link>
        </span>
      </div>
      <div class="activities-content" v-if="hotActivitiesData.length>0">
        <el-col :span="8" v-for="(item,index) of hotActivitiesData" :key="index">
          <div class="activitie-item">
            <i :class="'Status'+item.show_status_int">{{item.show_status_text}}</i>
            <div class="activitie-poster">
              <router-link :to="{path: '/events/activitiesDetails', query: {id: item.id}}">
                <img :src="BASE_URL+item.picture" :onerror="errorImg" alt="封面">
              </router-link>
            </div>
            <div class="activitie-info">
              <p class="activitie-title">
                <router-link :to="{path: '/events/activitiesDetails', query: {id: item.id}}">
                  {{item.name}}
                </router-link>
              </p>
              <p class="start-time">{{item.start_time}}</p>
              <p class="place-info"><i class="place-icon"></i>
               <i :title="item.place">{{item.place}}</i>
              </p>
            </div>
          </div>
        </el-col>
      </div>
      <div v-else class="no-data-tips tips1"></div>
    </section>
    <section class="common-cards hot-events">
      <div class="common-title clear">
        <span class="fl">热门比赛</span>
        <span class="fr">
          <router-link to="/events/sports">更多 ></router-link>
        </span>
      </div>
      <div class="events-content" v-if="hotEventsData.length>0">
        <div class="event-item" v-for="(item,index) of hotEventsData" :key="index">
          <div class="event-poster">
            <router-link :to="{path: '/events/eventsDetails', query: {id: item.id}}">
              <img :src="BASE_URL+item.picture" :onerror="errorImg" alt="封面">
            </router-link>
          </div>
          <div class="event-info">
            <p class="event-title">
              <router-link :to="{path: '/events/eventsDetails', query: {id: item.id}}">
                {{item.name}}
              </router-link>
            </p>
            <p class="start-time">{{item.start_time}}</p>
            <p class="place-info"><i class="place-icon"></i>
             <i :title="item.place">{{item.place}}</i>
            </p>
          </div>
          <span :class="'event-status progress'+item.show_status_int">{{item.show_status_text}}</span>
        </div>
      </div>
      <div v-else class="no-data-tips tips2"></div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotActivitiesData: [],//热门活动数据
      hotEventsData: [],//热门赛事数据
      errorImg://封面图片加载不成功时的占位符
        'this.src="' +
        require("../../../assets/images/events/bg-img.png") +
        '"',
    };
  },
  created() {
    this.getActivities();
    this.getEvents();
  },
  mounted() {
  },
  methods: {
    // 获取热门活动的数据
    getActivities() {
      let success = res => {
        this.hotActivitiesData = res.data.data;
      };
      this.$ajax({
        url: "api/competition/activity",
        method: "get",
        params: {
          page_index: 1,
          page_size: 6,
          order: "hot",
          order_type: "DESC"
        },
        func: {
          success: success
        }
      });
    },
    getEvents() {
      let success = res => {
        this.hotEventsData = res.data.data;
      };
      this.$ajax({
        url: "api/competition/match",
        method: "get",
        params: {
          page_index: 1,
          page_size: 2,
          order: "hot",
          order_type: "DESC"
        },
        func: {
          success: success
        }
      });
    },
  }
};
</script>
<style lang="scss">
.no-data-tips {
  height: 400px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.tips1 {
  background: url("../../../assets/images/events/pleaceholder (1).png")
    no-repeat center #fff;
}
.tips2 {
  background: url("../../../assets/images/events/pleaceholder (2).png")
    no-repeat center #fff;
}
.activitie-title {
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.place-info{
    max-width: 400px;
    white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>

